<template>
	<view>
		<!-- 列表项 -->
		<view class="goods-item" @click="clickHandler">
			<!-- 选择框 ，条件渲染 -->
			<view class="radio-box" v-if="showRadio" @click="radioClick">
				<radio color="#ea4350" :checked="goods.goods_status"></radio>
			</view>
			
			<!-- 左 -->
			<view class="left">
				<image :src="goods.goods_small_logo || defaultImgSrc" mode=""></image>
			</view>
			
			<!-- 右 -->
			<view class="right">
				<!-- 上 标题 -->
				<view class="title">{{goods.goods_name}}</view>
				<!-- 下 价格-->
				<view class="buttom">
					<view class="price">￥{{goods.goods_price | priceFormat}}</view>
					<!-- 计数器 -->
					<block v-if="showNum">
						<uni-number-box :value="goods.goods_count" @change="changeHandler" min="1"></uni-number-box>
					</block>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-goods",
		props: {
			showNum: {
				type: Boolean,
				default:false
			},
			showRadio: {
				type: Boolean,
				default: false
			},
			goods: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				defaultImgSrc: '/static/images/empty.png'
			}
		},	
		methods:{
			// 计数器数字改变时
			changeHandler(val) {
				// console.log(val); //val计数器数字
				this.$emit('num-change', {
					goods_count: val,
					goods_id: this.goods.goods_id
				})
			},
			// 选择框点击事件
			radioClick() {
				this.$emit('radio-click', this.goods)
			},
			clickHandler() {
				this.$emit('click', this.goods)
			}
		},
		filters: {
			priceFormat(val) {
				return val.toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
.radio-box {
	display: flex;
	align-items: center;
}
.goods-item {
	display: flex;
	border-bottom: 1px solid #eee;
	padding: 6px 6px 3px 6px;
	.left {
		margin-right: 6px;
		image {
			width: 100px;
			height: 100px;
		}
	}
	.right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		.title {
			font-size: 12px;
		}
		.price {
			color: #ea4350;
		}
		.buttom {
			display: flex;
			justify-content: space-between;
		}
	}
}
</style>